<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>管理系统</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/font-awesome/4.5.0/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts.googleapis.com.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace.min.css}" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" th:href="@{/css/ace-part2.min.css}" class="ace-main-stylesheet"/>
    <link rel="stylesheet" th:href="@{/css/ace-skins.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace-rtl.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/ace-ie.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/jquery-ui.custom.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/chosen.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-datetimepicker.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-colorpicker.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/dataTables.bootstrap4.min.css}"/>
    <script th:src="@{/js/ace-extra.min.js}"></script>
    <script th:src="@{/js/html5shiv.min.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
</head>

<body class="no-skin">
<!--头导航栏-->
<div th:replace="common/bar::#navbar"></div>
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>
    <!-- 侧导航栏 -->
    <div th:replace="common/bar::#sidebar"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">sys</a>
                    </li>
                    <li class="active">index</li>
                </ul><!-- /.breadcrumb -->
            </div>

            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12 col-sm-4">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h4 class="widget-title">委托单填写</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main no-padding">
                                    <form>
                                        <fieldset>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-3">
                                                    <label>委托单位</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <select class="chosen-select entrust_content form-control"
                                                            id="entrust_client"
                                                            data-placeholder="Choose a State...">
                                                        <option th:each="client:${clients}"
                                                                th:value="${client?.clientId}">
                                                            [[${client?.clientName}]]
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-3">
                                                    <label>委托时间</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <div class="input-group">
                                                        <input id="entrust_date" class="entrust_content form-control"
                                                               type="text"/>
                                                        <span class="input-group-addon">
                                                                <i class="fa fa-calendar bigger-110"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-3">
                                                    <label>委托地点</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <input class="entrust_content form-control" type="text"
                                                           id="entrust_address">
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-3">
                                                    <label>受理人</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <input class="entrust_content form-control" type="text"
                                                           id="entrust_acceptor"
                                                           th:value="${session.cur_user.holder}" readonly>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-3">
                                                    <label for="entrust_remark">备注</label>
                                                </div>
                                                <div class="col-xs-12 col-sm-8">
                                                    <textarea class="form-control" id="entrust_remark"
                                                              placeholder="备注..."></textarea>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="form-actions center">
                                            <button type="button" class="btn btn-sm btn-success"
                                                    onclick="submit_entrust()">
                                                提交
                                                <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-8">

                    </div>
                </div>
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
                <span class="bigger-120">
                    <span class="blue bolder">Ace</span>
                    管理系统 &copy; 2020
                </span>
            </div>
        </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<script th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/locales/moment-with-locales.min.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/js/bootstrap-colorpicker.min.js}"></script>
<script th:src="@{/js/jquery.maskedinput.min.js}"></script>
<script th:src="@{/js/ace-elements.min.js}"></script>
<script th:src="@{/js/ace.min.js}"></script>
<script th:src="@{/js/chosen.jquery.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap4.min.js}"></script>
<script>
    // $('.date-picker').datepicker({
    //     language: 'zh-CN',
    //     autoclose: true,
    //     todayHighlight: true,
    //     format: 'yyyy-mm-dd'
    // })
    $('#entrust_date').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',//use this option to display seconds
        locale: 'zh-cn',
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-arrows ',
            clear: 'fa fa-trash',
            close: 'fa fa-times'
        }
    }).next().on(ace.click_event, function () {
        $(this).prev().focus();
    });
    function submit_entrust() {
        var con = true;
        $(".entrust_content").each(function () {
            if ($(this).val().trim() == "") {
                alert("请将数据完整填写");
                return false;
            }
        });
        if(!con){
            return false;
        }
        $.ajax({
            url: "/entrust/submit",
            type: "post",
            contentType: "application/json;charset=utf-8",
            dateType: "json",
            data:
                JSON.stringify({
                    clientId: $("#entrust_client").val(),
                    entrustDate: $("#entrust_date").val(),
                    entrustAddress: $("#entrust_address").val(),
                    remark: $("#entrust_remark").val()
                }),
            success: function (data) {
                alert(data.message);
                if (data.code == 200) {
                    //异步刷新 表格
                    $("#entrust_date").val("");
                    $("#entrust_address").val("");
                    $("#entrust_remark").val("");
                    $("#entrust_table").DataTable().ajax.reload();
                }
            }
        });
    }
</script>

</body>
</html>
